import { useEcharts } from '@/hooks/useEcharts';
import useStores from '@/hooks/useStores';
import React, { useRef } from 'react';

const option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {d}%',
    },
    legend: {
        orient: 'horizontal',
        top: 30,
        padding: 5,
        itemWidth: 20,
        itemHeight: 12,
        textStyle: {
            color: '#777',
        },
    },
    series: [{
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['50%', '50%'],
        label: {
            show: true,
            formatter: '{b} : {d}%',
            color: '#777',
        },
        labelLine: {
            show: true,
            length2: 10,
        },
        data: [
            {
                value: 335,
                name: '直接访问',
            },
            {
                value: 77,
                name: 'Bilibili',
            },
            {
                value: 82,
                name: '知乎',
            },
            {
                value: 421,
                name: '小红书',
            },
        ],
    },
    ],
}
const Chart3: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);
    const { themes } = useStores();
    useEcharts(chartRef, { option, style: { width: '100%', height: '300px' }, theme: themes.type });
    return (
        <div ref={chartRef} style={{ width: '100%', height: '300px' }}></div>
    )
}

export default Chart3;